<template>
  <div>
    <div class="item_box">
      <p class="title_1 mb10">概要信息</p>
      <DetailForm :dataSources="projectData" :columns="profileColumns"/>
    </div>
    <div class="item_box">
      <p class="title_1 mb10">基本信息</p>
      <DetailForm :dataSources="projectData" :columns="baseColumns">
        <template v-slot:fileIds="{formItem}">
          <span v-for="item in projectData.fileList" class="form_link_Btn" :key="item.id">{{ item.name }}</span>
        </template>
      </DetailForm>
    </div>
    <div class="item_box">
      <p class="title_1 mb10">项目要素</p>
      <DetailForm :dataSources="projectData" :columns="projectElements"/>
    </div>
    <div class="item_box">
      <p class="title_1 mb10">业务联络</p>
      <p class="item_box_c_title">司内联系人</p>
      <div class="item_box_c mb10">
        <DetailForm :dataSources="item" :columns="snColumns" v-for="(item, index) in snContactsArr" :key="index+'snContacts'"/>
      </div>
      <p class="item_box_c_title">客户联系人</p>
      <div class="item_box_c mb10">
        <DetailForm :dataSources="item" :columns="custColumns" v-for="(item, index) in custContactsArr" :key="index+'snContacts'"/>
      </div>
      <p class="item_box_c_title">经济公司联系人</p>
      <div class="item_box_c mb10">
        <DetailForm :dataSources="item" :columns="jjgsColumns" v-for="(item, index) in jjgsContactsArr" :key="index+'snContacts'"/>
      </div>
    </div>
  </div>
</template>
  
<script setup>
import useSettingsStore from "@/store/modules/settings";
import { reactive } from 'vue';

const theme = computed(() => useSettingsStore().theme);
const props = defineProps({
  pageType: {
    type: String,
    default: false,
  },
})

// 概要信息
const profileColumns = ref([
  {label: '客户名称', column: 'custName', span: 8},
  {label: '证件类型', column: 'certType', span: 8},
  {label: '证件号码', column: 'certNo', span: 8},
])
// 基本信息
const baseColumns = ref([
  {label: '项目号', column: 'projectCode', span: 8},
  {label: '项目简介', column: 'projectIntro', span: 8},
  {label: '是否总公司授权', column: 'isEmpower', span: 8},
  {label: '项目名称', column: 'projectName', span: 8},
  {label: '项目分类', column: 'projectType', span: 8},
  {label: '项目开始时间', column: 'startTime', span: 8},
  {label: '项目结束时间', column: 'endTime', span: 8},
  {label: '项目创建人', column: 'projectCreator', span: 8},
  {label: '新转续', column: 'newRenewal', span: 8},
  {label: '本年度保费规模（万元）', column: 'clientPremiumScope', span: 8},
  {label: '投标日期', column: 'bidDate', span: 8},
  {label: '与我司合作历史', column: 'collaborationHistory', span: 8},
  {label: '合作关系评估', column: 'hzgxpg', span: 8},
  {label: '经济公司（万元）', column: 'economicCompany', span: 8},
  {label: '客户预算', column: 'budget', span: 8},
  {label: '客户期望安排方式', column: 'khqwapfs', span: 8},
  {label: '投标授权主体', column: 'bidEmpowerSubject', span: 8},
  {label: '申请分公司', column: 'sqfgs', span: 8},
  {label: '项目概况简介', column: 'overview', span: 24, toHtml: true},
  {label: '其他参与公司', column: 'otherParticipatingOrg', span: 24},
  {label: '竞争对手现状', column: 'jzdsxz', span: 24},
  {label: '我司目标与策略', column: 'wsmbycl', span: 24},
  {label: '附件', column: 'fileIds', slot: 'fileIds', span: 24},
])
// 项目要素
const projectElements = ref([
  {label: '预计总保费（万元）', column: 'yjzbf', span: 8},
  {label: '目标保费（万元）', column: 'mbbf', span: 8},
  {label: '目标份额（%）', column: 'mbfe', span: 8},
  {label: '车辆规模', column: 'clgm', span: 8},
  {label: '预计报价/谈判日期', column: 'yjbjtprq', span: 8},
  {label: '历史赔付率（%）', column: 'lspfl', span: 8},
  {label: '主要车辆类型', column: 'zycllx', span: 8},
  {label: '项目类型', column: 'projectType2', span: 8},
  {label: '涉及险种', column: 'sjxz', span: 8, toHtml: true},
  {label: '业务渠道', column: 'ywqd', span: 8},
  {label: '预计分出比例', column: 'yjfcbl', span: 8},
  {label: '预计分出金额', column: 'yjfcje', span: 8},
  {label: '备注', column: 'notes', span: 24},
])
// 表单数据
const projectData = reactive({
  custName: '武汉市轨道交通股份有限公司',
  certType: '统一社会信用代码',
  certNo: '12345678765',
  projectCode: '3464573463464574',
  projectIntro: '建设地铁8号线武宁路地铁站',
  isEmpower: '是',
  startTime: '2023-10-17',
  endTime: '2024-10-17',
  projectCreator: '张某军',
  newRenewal: '转保',
  clientPremiumScope: '',
  bidDate: '',
  collaborationHistory: '',
  hzgxpg: '',
  economicCompany: '',
  budget: '',
  khqwapfs: '',
  overview: '词语1,词语2,词语3,词语4',
  otherParticipatingOrg: '',
  bidEmpowerSubject: '北京分公司',
  sqfgs: '总公司',
  jzdsxz: '',
  wsmbycl: '',
  fileIds: '',
  fileList: [{id:1, name: '图片1.png'}, {id:2, name: '附件2.pdf'}],
  yjzbf: '100',
  mbbf: '90',
  mbfe: '90',
  clgm: '11',
  yjbjtprq: '2024-09-12',
  lspfl: '0.5',
  zycllx: '',
  projectType2: '车险',
  sjxz: '险种1,险种2,险种3',
  ywqd: '',
  yjfcbl: '',
  yjfcje: '',
  notes: '',
})
// 司内联系人
const snContactsArr = [
  {lxrxm: '刘大拿', ssbm: '武昌分公司', ssfgs: '武汉分公司', zw: '监理工程师', dianhua: '6583658745', phone: '13212345678', chuanzhen: '6584657385', email: '724628734@163.com', teamRole: '经理', teamRole: '监理'},
  {lxrxm: '刘大拿', ssbm: '武昌分公司', ssfgs: '武汉分公司', zw: '监理工程师', dianhua: '6583658745', phone: '13212345678', chuanzhen: '6584657385', email: '724628734@163.com', teamRole: '经理', teamRole: '监理'},
  {lxrxm: '刘大拿', ssbm: '武昌分公司', ssfgs: '武汉分公司', zw: '监理工程师', dianhua: '6583658745', phone: '13212345678', chuanzhen: '6584657385', email: '724628734@163.com', teamRole: '经理', teamRole: '监理'},
]
const snColumns = ref([
  {label: '联系人姓名', column: 'lxrxm', span: 8},
  {label: '所属部门', column: 'ssbm', span: 8},
  {label: '职务', column: 'zw', span: 8},
  {label: '电话', column: 'dianhua', span: 8},
  {label: '手机', column: 'phone', span: 8},
  {label: '传真', column: 'chuanzhen', span: 8},
  {label: '邮箱地址', column: 'email', span: 8},
  {label: '团队角色', column: 'teamRole', span: 8},
  {label: '项目角色', column: 'teamRole', span: 8},
])
// 客户联系人
const custContactsArr = [
  {lxrxm: '刘大拿', ssbm: '武昌分公司', zw: '监理工程师', dianhua: '6583658745', phone: '13212345678', chuanzhen: '6584657385', email: '724628734@163.com'},
  {lxrxm: '刘大拿', ssbm: '武昌分公司', zw: '监理工程师', dianhua: '6583658745', phone: '13212345678', chuanzhen: '6584657385', email: '724628734@163.com'},
]
const custColumns = ref([
  {label: '联系人姓名', column: 'lxrxm', span: 8},
  {label: '手机', column: 'phone', span: 8},
  {label: '邮箱地址', column: 'email', span: 8},
  {label: '所属部门', column: 'ssbm', span: 8},
  {label: '职务', column: 'zw', span: 8},
  {label: '电话', column: 'dianhua', span: 8},
  {label: '传真', column: 'chuanzhen', span: 24},
])
// 经济公司联系人
const jjgsContactsArr = [
  {lxrxm: '刘大拿', ssbm: '武昌分公司', zw: '监理工程师', dianhua: '6583658745', phone: '13212345678', chuanzhen: '6584657385', email: '724628734@163.com'},
]
const jjgsColumns = ref([
  {label: '联系人姓名', column: 'lxrxm', span: 8},
  {label: '手机', column: 'phone', span: 8},
  {label: '邮箱地址', column: 'email', span: 8},
  {label: '所属部门', column: 'ssbm', span: 8},
  {label: '职务', column: 'zw', span: 8},
  {label: '电话', column: 'dianhua', span: 8},
  {label: '传真', column: 'chuanzhen', span: 24},
])

</script>

<style lang="scss" scoped>
.title_1{
  margin: 10px;
  margin-left: 0;
}
</style>